<template>
  <div>
    <el-dialog
      title="打印模板"
      :visible.sync="dialogVisible"
      :show-close="showClo"
      width="288px"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="qianzhi_content">
        <div class="qianzhi_top">
          <div class="top_left">渡石医药</div>
          <div class="top_right">
            <span>10 — 1</span>
            <i>2022--2-28/17:22</i>
          </div>
        </div>
        <!-- <div class="qianzhi_tm"><img :src="tiaomaImg" /></div> -->
        <div class="qianzhi_address">
          <span class="span1">目的地</span>
          <span>西安市---转运中心----目的地</span>
        </div>
        <div class="qianzhi_sjr">
          <span class="span2">收件人</span>
          <span>
            <i>张三</i>
            <i>徐州XXXXXXXXXX</i>
            <i>138XXXXXXXX</i>
          </span>
        </div>
        <div class="shangj_code">
          <span class="span1">商家代码</span>
          <span>029XXXXXXXXXX</span>
        </div>
        <div class="qianzhi_detail">
          <div class="detail_left">
            <span>托运单</span>
          </div>
          <div class="detail_right">
            <span>运输方式</span>
            <div class="detail_c">
              <div><span>冷藏</span><span>冷冻</span><span>普通</span></div>
              <div><font>温控适量：</font><i></i></div>
              <div><font>重量：</font><i></i></div>
              <div><font>标识：</font><i></i></div>
              <div><font>数量：</font><i></i></div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import logoVImg from "@/assets/img/logo.png";
// import titleVImg from "@/assets/img/title.jpg";
// import tiaomaVImg from "@/assets/img/tiaoma.jpg";
// import smaVImg from "@/assets/img/sma.jpg";
export default {
  name: "signpaper",
  data() {
    return {
      // logo: logoVImg,
      // titleImg: titleVImg,
      // tiaomaImg:tiaomaVImg,
      // smaImg:smaVImg,
      showClo: false,
    };
  },
  props: ["dialogVisible"],
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("dialogVisibleShow", false);
    },
    dialogVisibleClickFn() {
      this.dialogVisible = false;
      this.$emit("dialogVisibleShow", false);
    },
    dialogVisiblesubmitFn() {
      this.dialogVisible = false;
      this.$emit("dialogVisibleShow", false);
    },
  },
};
</script>
<style lang='less' scoped>
/deep/.el-dialog__body {
  padding: 0px !important;
}
/deep/.el-dialog__header {
  display: none !important;
}
.qianzhi_content {
  width: 286px;
  min-height: 286px;
  overflow: hidden;
  border: 1px dashed #000;
  .qianzhi_top {
    height: 50px;
    overflow: hidden;
    border-bottom: 1px dashed #000;
    .top_left {
      font-size: 24px;
      color: #000;
      float: left;
      font-weight: bold;
      line-height: 50px;
    }
    .top_right {
      float: right;
      text-align: center;
      span {
        font-size: 18px;
        font-weight: bold;
        display: block;
      }
      i {
        font-size: 12px;
        margin-top: -3px;
        display: block;
      }
    }
  }
  .qianzhi_tm {
    height: 80px;
    border-bottom: 1px dashed #000;
    img {
      width: 286px;
      height: 80px;
    }
  }
  .qianzhi_address {
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed #000;
    span {
      display: block;
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
    }
    .span1 {
      width: 55px;
      text-align: center;
      display: block;
      border-right: 1px dashed #000;
    }
  }
  .qianzhi_sjr {
    height: 80px;
    overflow: hidden;
    border-bottom: 1px dashed #000;
    span {
      display: block;
      float: left;
      i {
        display: block;
        line-height: 25px;
        padding-left: 5px;
      }
    }
    .span2 {
      width: 26px;
      padding: 10px 7px 13px 27px;
      border-right: 1px dashed #000;
    }
  }
  .shangj_code {
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed #000;
    span {
      display: block;
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
    }
    .span1 {
      width: 55px;
      text-align: center;
      display: block;
      border-right: 1px dashed #000;
    }
  }
  .qianzhi_detail {
    min-height: 150px;
    .detail_left {
      width: 49%;
      float: left;
      display: block;
      min-height: 150px;
      border-right: 1px dashed #000;
      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
      }
    }
    .detail_right {
      width: 49%;
      float: left;
      display: block;
      min-height: 150px;
      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
      }
      .detail_c {
        overflow: hidden;
        div {
          width: 100%;
          height: 23px;
          line-height: 23px;
          span {
            display: block;
            float: left;
            width: 28%;
            text-align: center;
            height: 20px;
            line-height: 20px;
          }
          font {
            display: block;
            float: left;
            padding-left: 5px;
          }
          i {
            display: block;
            float: left;
          }
        }
      }
    }
  }
}
</style>